<script setup lang="ts">
import { MenuItem } from './type'
import { hasChildren } from './utils'

defineProps<{
  items: MenuItem[]
}>()
</script>

<template>
  <template v-for="item of items" :key="item.value">
    <ElSubMenu v-if="hasChildren(item)" :index="'' + item.value">
      <template #title>
        <span>{{ item.label }}</span>
      </template>
      <!-- @ts-ignore -->
      <MenuItems :items="item.children!" />
    </ElSubMenu>
    <ElMenuItem v-else :index="`${item.value}`">{{ item.label }}</ElMenuItem>
  </template>
</template>
